import { getMenuData, getPageTitle } from '@ant-design/pro-layout'
import { Icon } from 'antd'
import { Helmet } from 'react-helmet'
import Link from 'umi/link'
import React from 'react'
import { connect } from 'dva'
import { formatMessage } from 'umi-plugin-react/locale'
import styles from './UserLayout.less'

const UserLayout = props => {
  const {
    route = {
      routes: [],
    },
  } = props
  const { routes = [] } = route
  const {
    children,
    location = {
      pathname: '',
    },
    copyright,
  } = props
  const { breadcrumb } = getMenuData(routes)
  const title = getPageTitle({
    pathname: location.pathname,
    breadcrumb,
    formatMessage,
    ...props,
  })
  return (
    <>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={title} />
      </Helmet>

      <div className={styles.container}>
        <div className={styles.userLayoutHeader}>
          <div className={styles.header_content}>
            <div className={styles.header_logo}></div>
            <div className={styles.header_title}>EAM</div>
            <div className={styles.header_contact}>
              <Icon type="phone" />
              <span>联系我们</span>
            </div>
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.content_bg}>
            <div className={styles.content_main}>{children}</div>
          </div>
        </div>
        <div className={styles.userLayoutFooter}>
          {/* <div className={styles.footer_content}>
            <Link className={styles.per_link} to="/">
              帮助
            </Link>
          </div> */}
          <div style={{ textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: copyright }}></div>
        </div>
      </div>
    </>
  )
}

export default connect(({ settings }) => ({ ...settings }))(UserLayout)
